<template>
  <a-select
    v-if="isEdit"
    allowClear
    show-search
    optionFilterProp="label"
    :disabled="record.options.disabled"
    v-model="row[record.key]"
    @change="updateStatus({ row, column })"
    :placeholder="'请选择' + item.label"
    :size="record.options.size"
  >
    <a-select-option
      :value="sitem.value"
      :label="sitem.label"
      :key="index"
      v-for="(sitem, index) in record.options.options"
    >
      <span
        v-if="record.options.optionsColor"
        class="eip-color-btn"
        :style="{ 'background-color': sitem.color }"
      >
        {{ sitem.label }}
      </span>

      <span v-else>
        {{ sitem.label }}
      </span>
    </a-select-option>
  </a-select>

  <label v-else>
    <a-space>
      <span v-for="item in convert(row, column)" :key="item.value">
        <a-button
          class="eip-button"
          :style="{
            'background-color': item.color
              ? item.color
              : 'rgba(80,120,150,.08)',
          }"
          shape="round"
          size="small"
        >
          {{ item.label }}</a-button
        >
      </span>
    </a-space>
  </label>
</template>
<script>
export default {
  name: "gridSelect",
  data() {
    return {};
  },
  props: ["column", "row", "record", "isEdit"],
  watch: {},
  methods: {
    /**
     * 更改值状态
     */
    updateStatus() {
      this.$emit("change", {
        row: this.row,
        column: this.column,
      });
    },

    /**
     * 格式化
     */
    convert(row, column) {
      let that = this;
      var value = row[column.field];
      if (value && value.length > 0) {
        var returnValue = [];
        var find = that.$utils.find(
          that.record.options.options,
          (f) => f.value == value
        );
        returnValue.push({
          color: that.record.options.optionsColor
            ? find.color
            : "rgba(80,120,150)",
          label: find.label,
          value: find.value,
        });
        return returnValue;
      } else {
        return [];
      }
    },
  },
};
</script>
<style lang="less" scoped>
.eip-button {
  color: #fff;
  font-size: 12px;
  border: none;
}
</style>
